<template>
    <div class="echart-detail-wrap">
        <el-card class="top-card" :body-style="{ padding: '26px 20px' }">
            <div class="title-wrap">
                <el-button class="top-button" type="info" size="small" @click="handleGoBack()">
                    <i class="el-icon-arrow-left"></i>
                    {{ $t('product.product-edit.473153-44') }}
                </el-button>
                <span class="info-item">{{ $t('scada.echart.209302-8') }}：{{ form.echartName }}</span>
                <span class="info-item">
                    {{ $t('scada.echart.209302-9') }}：
                    <span style="color: #486ff2">{{ form.echartType }}</span>
                </span>
                <span class="info-item">{{ $t('scada.echart.209302-10') }}： {{ parseTime(form.updateTime, '{y}-{m}-{d}') }}</span>
            </div>
        </el-card>

        <el-row :gutter="10">
            <el-col :span="12">
                <el-card>
                    <div slot="header">
                        <span>{{ $t('scada.echart.209302-3') }}&nbsp;-&nbsp;</span>
                        <a href="https://www.isqqw.com/" target="_blank" style="color: #486ff2">{{ $t('scada.echart.209302-4') }}</a>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="loadEchartDatas" icon="el-icon-refresh">{{ $t('scada.component.302923-0') }}</el-button>
                        <el-button style="float: right; padding: 3px 0; margin-right: 10px; color: #486ff2" type="text" @click="handleSubmitForm" v-hasPermi="['scada:echart:edit']">
                            <svg-icon icon-class="save" />
                            {{ $t('save') }}
                        </el-button>
                    </div>
                    <monaco-editor ref="editor" height="75vh" @change="handleEditorChange"></monaco-editor>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div slot="header">
                        <span>{{ $t('scada.echart.209302-5') }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="handleDownloadImage" icon="el-icon-download">{{ $t('scada.echart.209302-6') }}</el-button>
                    </div>
                    <div ref="echart" style="height: 75vh; width: 100%"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getEchart, updateEchart } from '@/api/scada/echart';
import html2canvas from 'html2canvas';

export default {
    name: 'EchatDetail',
    data() {
        return {
            // 表单参数
            form: {
                echartData: '',
            },
            echart: null,
        };
    },
    mounted() {
        this.getDetail();
    },
    methods: {
        // 获取详情
        getDetail() {
            getEchart(this.$route.query.id).then((res) => {
                if (res.code === 200) {
                    this.form = res.data;
                    this.$refs.editor.setValue(this.form.echartData);
                    this.loadEchartDatas();
                }
            });
        },
        // 数据加载
        loadEchartDatas() {
            if (this.echart) {
                this.echart.dispose(); // 销毁ECharts实例
            }
            let funStr = this.getFun(this.form.echartData);
            let fun = eval('(' + funStr + ')');
            let option = fun(this.$echarts);
            let view = this.$refs.echart;
            this.echart = this.$echarts.init(view, 'light');
            this.echart.setOption(option);
        },
        getFun(optionStr) {
            let funStr = 'function (echarts) {\n' + optionStr + '\n' + '    return option;\n' + '}';
            return funStr;
        },
        //编辑器
        handleEditorChange(data) {
            this.form.echartData = data;
        },
        // 提交按钮
        handleSubmitForm() {
            let canvasBox = this.$refs.echart;
            let _this = this;
            _this.$modal.loading(this.$t('scada.component.302923-1'));
            html2canvas(canvasBox).then(function (canvas) {
                _this.form.base64 = canvas.toDataURL('image/png');
                updateEchart(_this.form).then((res) => {
                    if (res.code === 200) {
                        _this.$modal.msgSuccess(_this.$t('updateSuccess'));
                    }
                    _this.$modal.closeLoading();
                });
            });
        },
        // 页面元素转图片
        handleDownloadImage() {
            // 转换成canvas
            let canvasBox = this.$refs.echart;
            let _this = this;
            html2canvas(canvasBox).then(function (canvas) {
                var img = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a');
                creatIMg.download = `${_this.form.echartName}.png`; // 设置下载的文件名，
                creatIMg.href = img; // 下载url
                document.body.appendChild(creatIMg);
                creatIMg.click();
                creatIMg.remove(); // 下载之后把创建的元素删除
            });
        },
        // 返回上一级
        handleGoBack() {
            this.$router.go(-1);
        },
    },
};
</script>
<style lang="scss" scoped>
.echart-detail-wrap {
    padding: 20px;

    .top-card {
        margin-bottom: 10px;

        .title-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;

            .top-button {
                height: 22px;
                color: #909399;
                background: #f4f5f7;
                padding: 0px 8px;
                border: none;
            }

            .info-item {
                font-weight: normal;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                margin-left: 36px;
            }
        }
    }
}
</style>
